
import { PureComponent } from 'react';
import { isNull } from '../../utils/request';
import MySelectDisplay from './MyForm/MySelectDisplay';
interface Props {
  value?: any,
  isReset: boolean,
  getFieldDecorator: Function,
  field: string[],
  defaultFormData: object,
  label?: string,
  required?: any,
  show_label?: any,
  tips?: string,
  label_width?: any,
  label_text_color?: string,
  label_text_align?: any,
  onChange: Function,
  label_style: any,
  required_no_star: any
}
interface State {
  hasError: boolean,
  errorMsg: string,
  value?: any
}
export default class MiSelectDisplay extends PureComponent<Props, State>{
  public state: State = {
    hasError: false,
    errorMsg: ""
  }

  componentWillReceiveProps(next: Props) {
    let { isReset: oldReset } = this.props;
    let { isReset: newReset } = next;
    if (oldReset !== newReset && newReset) {
      this.setState({
        hasError: false
      })
    }
  }

  render() {
    let { getFieldDecorator, field, defaultFormData, label, label_style, required, show_label, tips, label_width = 5, label_text_color, label_text_align = "left", required_no_star,horizontal } = this.props;
    // horizontal:1 是否水平显示 默认0
    let { errorMsg } = this.state;
    let isShowLabel = isNull(show_label) || show_label == 1
    let { hasError } = this.state;
    let isRequired = required == 1;
    let requiredClass = " mi-select-display"
    if (isRequired && required_no_star != 1) {
      requiredClass += " required"
    }
    if (!isShowLabel) {
      requiredClass += " no-label"
    }
    if (hasError) {
      requiredClass += " am-input-error"
    }
    let dataFlex={};
    if(horizontal==1){
      dataFlex={
        "data-flex":"dir:left"
      }
    }
    return (
      <div>
        <div data-flex="dir:left box:first" style={{ paddingRight: '15px' }} className={requiredClass}>
          <div style={{ width: "25px", lineHeight: "44px" }}>
            {
              isRequired && required_no_star!=1 && <p style={{ color: "#f5222d", fontSize: "14px", textAlign: "right", fontFamily: "SimSun",marginRight:"4px" }}>*</p>
            }
          </div>
          <div {...dataFlex}>
            {
              isShowLabel && <p style={{ lineHeight: "44px", fontSize: "16px", width: label_width * 17 + "px", textAlign: label_text_align, color: label_text_color, ...label_style }}>{label}<span style={{position:"relative",top:"-0.5px",margin:"0 2px",fontSize:"16px"}}>:</span></p>
            }
            {
              getFieldDecorator(field[0], {
                initialValue: defaultFormData[field[0]],
                rules: [{
                  validator: (rule, value, callback) => {
                    if (isRequired) {
                      if (isNull(value)) {
                        // if (!hasError) {
                          this.setState({
                            hasError: true,
                            errorMsg: "请选择：" + label
                          })
                          callback("请选择：" + label)
                        // }
                      }
                      else {
                        this.setState({
                          hasError: false,
                          errorMsg: ""
                        })
                        callback()
                      }
                    }
                    callback()
                  }
                }]
              })(
                <MySelectDisplay {...this.props} errorMsg={errorMsg} />
              )
            }
            {tips && <p className="tipsStyle" style={{ margin: 0 }}>{tips}</p>}
          </div>
        </div>
      </div>
    )
  }
}
//